<template>
  <div class="timestamp-converter">
    <!-- 时间戳转日期模块 -->
    <div class="converter-section">
      <div class="section-header">
        <h2>时间戳 → 日期时间</h2>
        <span class="current-time">当前时间戳：{{ currentTimestamp }}</span>
      </div>
      <div class="input-group">
        <label for="timestamp">时间戳：</label>
        <input
          type="text"
          id="timestamp"
          v-model="timestamp"
          placeholder="输入时间戳"
        />
      </div>
      <div class="input-group">
        <label for="timezone1">时区：</label>
        <select id="timezone1" v-model="selectedTimezone1">
          <option v-for="tz in timezones" :key="tz" :value="tz">{{ tz }}</option>
        </select>
      </div>
      <button @click="convertToDateTime">转换为日期时间</button>
      <div class="result">
        <p v-if="convertedDateTime">
          转换结果：{{ convertedDateTime }}
          <div @click="copyResult(convertedDateTime, 'timestamp')" class="copy-button">复制</div>
        </p>
        <div v-if="copySuccessMessage.timestamp" class="copy-success">
          {{ copySuccessMessage.timestamp }}
        </div>
      </div>
    </div>

    <!-- 日期转时间戳模块 -->
    <div class="converter-section">
      <div class="section-header">
        <h2>日期时间 → 时间戳</h2>
        <span class="current-time">当前日期：{{ currentDateTime }}</span>
      </div>
      <div class="input-group">
        <label for="datetime">日期时间：</label>
        <input
          type="text"
          id="datetime"
          v-model="datetime"
          placeholder="格式：YYYY-MM-DD HH:mm:ss"
        />
      </div>
      <div class="input-group">
        <label for="timezone2">时区：</label>
        <select id="timezone2" v-model="selectedTimezone2">
          <option v-for="tz in timezones" :key="tz" :value="tz">{{ tz }}</option>
        </select>
      </div>
      <button @click="convertToTimestamp">转换为时间戳</button>
      <div class="result">
        <p v-if="convertedTimestamp">
          转换结果：{{ convertedTimestamp }}
          <div @click="copyResult(convertedTimestamp, 'datetime')" class="copy-button">复制</div>
        </p>
        <div v-if="copySuccessMessage.datetime" class="copy-success">
          {{ copySuccessMessage.datetime }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment-timezone';

export default {
  data() {
    return {
      timestamp: '', // 时间戳输入
      datetime: '', // 日期时间输入
      selectedTimezone1: 'Asia/Shanghai', // 时间戳转日期的时区
      selectedTimezone2: 'Asia/Shanghai', // 日期转时间戳的时区
      convertedDateTime: '', // 时间戳转日期的结果
      convertedTimestamp: '', // 日期转时间戳的结果
      currentTimestamp: '', // 当前时间戳
      currentDateTime: '', // 当前日期时间
      copySuccessMessage: {
        timestamp: '', // 时间戳模块的复制提示
        datetime: '', // 日期模块的复制提示
      },
      timezones: [
        'Asia/Shanghai',
        'America/New_York',
        'Europe/London',
        'Asia/Tokyo',
        'Australia/Sydney',
      ], // 常用时区列表
    };
  },
  mounted() {
    // 初始化当前时间戳和当前日期时间
    this.updateCurrentTime();
    // 每秒更新一次当前时间戳和当前日期时间
    setInterval(this.updateCurrentTime, 1000);
  },
  methods: {
    // 更新当前时间戳和当前日期时间
    updateCurrentTime() {
      this.currentTimestamp = moment().unix();
      this.currentDateTime = moment().tz(this.selectedTimezone2).format('YYYY-MM-DD HH:mm:ss');
    },
    // 时间戳转日期时间
    convertToDateTime() {
      if (this.timestamp) {
        const momentObj = moment.unix(this.timestamp).tz(this.selectedTimezone1);
        this.convertedDateTime = momentObj.format('YYYY-MM-DD HH:mm:ss');
      } else {
        this.convertedDateTime = '请输入有效的时间戳';
      }
    },
    // 日期时间转时间戳
    convertToTimestamp() {
      if (this.datetime) {
        const momentObj = moment.tz(this.datetime, 'YYYY-MM-DD HH:mm:ss', this.selectedTimezone2);
        if (momentObj.isValid()) {
          this.convertedTimestamp = momentObj.unix();
        } else {
          this.convertedTimestamp = '日期时间格式无效';
        }
      } else {
        this.convertedTimestamp = '请输入有效的日期时间';
      }
    },
    // 复制结果到剪贴板
    copyResult(result, type) {
      if (result) {
        navigator.clipboard.writeText(result).then(() => {
          this.copySuccessMessage[type] = '复制成功！';
          setTimeout(() => {
            this.copySuccessMessage[type] = ''; // 3秒后清除提示
          }, 3000);
        }).catch(() => {
          this.copySuccessMessage[type] = '复制失败，请手动复制。';
          setTimeout(() => {
            this.copySuccessMessage[type] = ''; // 3秒后清除提示
          }, 3000);
        });
      }
    },
  },
};
</script>

<style scoped>
.timestamp-converter {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 10px;
  font-family: Arial, sans-serif;
}

h1 {
  text-align: center;
  color: #6a1b9a;
  margin-bottom: 20px;
}

.converter-section {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background-color: #f9f9f9;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

h2 {
  color: #6a1b9a;
  margin: 0;
}

.current-time {
  font-size: 14px;
  color: #666;
}

.input-group {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

label {
  width: 80px;
  font-weight: bold;
  color: #333;
}

input,
select {
  flex: 1;
  padding: 8px;
  border: 1px solid #6a1b9a;
  border-radius: 5px;
  font-size: 14px;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #6a1b9a;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 15px;
}

button:hover {
  background-color: #7b1fa2;
}

.result {
  margin-top: 15px;
  text-align: center;
  font-size: 16px;
  color: #333;
}

.result p {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.copy-button {
  margin-left: 8px;
  padding: 4px 8px;
  background-color: #9c27b0;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.copy-button:hover {
  background-color: #7b1fa2;
}

.copy-success {
  margin-top: 10px;
  font-size: 14px;
  color: #4caf50; /* 绿色表示成功 */
}
</style>